<template>
  <div class>
    <div class="padding-lr30">
      <div class="padding-t60 padding-b100 flex justify-between">
        <div class="flex flex-column justify-around">
          <div class="text-33 title rem-48px">
            {{loginType?'个人登录':'企业登录'}}
            <span
              class="c-99 rem-36px margin-lr24"
              @click="tabLogin"
            >{{loginType?'企业登录':'个人登录'}}</span>
          </div>
          <div>
            <span class="c-99">您还没有账号哦,</span>
            <span class="c-ff0" @click="sign">立即注册</span>
          </div>
        </div>
        <div class="cover_img">
          <img src="@/assets/img/nologin.png" alt />
        </div>
      </div>

      <!-- 个人登录 -->
      <div v-if="loginType">
        <div>
          <div class="rem-30px flex align-center padding-tb30 border-bottom">
            <div class="c-99 w-90 text-justify word-all">手机号</div>
            <div class="flex-grow padding-l60">
              <input type="text" name="phone" v-model="phone" placeholder="请输入手机号" />
            </div>
          </div>
          <div class="rem-30px flex align-center padding-tb30 border-bottom">
            <div class="c-99 w-90 text-justify word-all">密码</div>
            <div class="flex-grow padding-l60">
              <input
                type="password"
                name="password"
                maxlength="18"
                v-model="password"
                placeholder="请输入6-18位密码"
              />
            </div>
          </div>
        </div>
        <!-- 找回密码 -->
        <div class="text-33 rem-26px margin-tb50" @click="rePsd">找回密码</div>
        <!--  -->
        <div class="padding-lr28 margin-t40">
          <div class="sure text-center bg-ff0 text-ff" @click="login">登录</div>
        </div>
      </div>

      <!-- 企业登录 -->
      <div v-if="!loginType">
        <div>
          <div class="rem-30px flex align-center padding-tb30 border-bottom">
            <div class="c-99 w-90 text-justify word-all">账户</div>
            <div class="flex-grow padding-l60">
              <input type="text" name="phone" v-model="phone_qx" placeholder="请输入账户" />
            </div>
          </div>
          <div class="rem-30px flex align-center padding-tb30 border-bottom">
            <div class="c-99 w-90 text-justify word-all">密码</div>
            <div class="flex-grow padding-l60">
              <input
                type="password"
                name="password"
                maxlength="18"
                v-model="password_qx"
                placeholder="请输入6-18位密码"
              />
            </div>
          </div>
        </div>
        <!-- 找回密码 -->
        <div class="text-33 rem-26px margin-tb50" @click="rePsd">找回密码</div>
        <!--  -->
        <div class="padding-lr28 margin-t40">
          <div class="sure text-center bg-ff0 text-ff" @click="qxLogin">登录</div>
        </div>
      </div>
    </div>

    <!-- 第三方 -->
    <div class="outlogin text-center padding-lr60" v-if="loginType">
      <div class="beaf rem-26px text-33">其他登录方式</div>
      <div class="icon-weixins">
        <i class="iconfont icon-weixin" @click="wxlogin"></i>
        <div class="rem-20px text-33 margin-t20">微信登录</div>
      </div>
      <div class="rem-26px padding-b40">未注册的手机号验证后将自动创建账号, 登录即代表您已同意链配隐私政策</div>
    </div>

    <div class="html"></div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      // 个人
      phone: "",
      password: "",
      // 企业
      phone_qx: "",
      password_qx: "",
      loginType: true // true 个人
    };
  },
  mounted() {
    // 从新需求页面进入
    var reg = new RegExp("[?&]" + "businessurl" + "=([^&]*)(&|$)", "gi");
    var result = reg.exec(window.location.search);
    if (result && result[1] && localStorage.getItem('token')) {
      let url = unescape(result[1]);
      // 如果携带了参数
      if (url.indexOf("?id=") > 0) {
        url += "&token=" + localStorage.getItem("token");
      } else {
        url += "?token=" + localStorage.getItem("token");
      }
      window.location.href = url;
      return false;
    }

    if (window.localStorage.getItem("token")) {
      this.$router.push({
        path: "/recruit/mine"
      });
    }

    if (window.localStorage.getItem("qx_token")) {
      this.$router.push({
        path: "/mine"
      });
    }

    if (this.$route.query.goods_id) {
      if (localStorage.getItem("goods_id_type") == null) {
        localStorage.setItem("goods_id", this.$route.query.goods_id);
        localStorage.setItem("goods_id_type", "1");
      }
    }
  },
  methods: {
    getList(e) {
      console.log(e);
    },
    login() {
      if (!this.phone || !this.password) {
        this.$toast("信息不能为空");
        return false;
      }

      this.$axios
        .post("/wap/login/index", {
          phone: this.phone,
          password: this.password
        })
        .then(res => {
          if (res.data.code == 0) {
            // 获取自己的id
            this.$axios
              .post("/wap/personal/card", {
                token: window.localStorage.getItem("token"),
                type: 1
              })
              .then(res => {
                window.localStorage.setItem("user_id", res.data.data.user.id);

                // 从新需求页面进入
                var reg = new RegExp(
                  "[?&]" + "businessurl" + "=([^&]*)(&|$)",
                  "gi"
                );
                var result = reg.exec(window.location.search);
                if (result && result[1]) {
                  let url = unescape(result[1]);
                  // 如果携带了参数
                  if (url.indexOf("?id=") > 0) {
                    url += "&token=" + localStorage.getItem("token");
                  } else {
                    url += "?token=" + localStorage.getItem("token");
                  }
                  window.location.href = url;
                  return false;
                } else if (localStorage.getItem("returnPath")) {
                  window.history.go(-1);
                  localStorage.removeItem("returnPath");
                  return false;
                } else {
                  this.$router.push({
                    name: "recruit-mine"
                  });
                }
              });
          }
        });
    },
    qxLogin() {
      this.$axios
        .post("/home/login/phone_password", {
          phone: this.phone_qx,
          password: this.password_qx
        })
        .then(res => {
          if (res.data.code == 0) {
            localStorage.setItem("qx_token", res.data.data.token);
            localStorage.setItem("qx_id", res.data.data.e_id);
            localStorage.setItem("qx_phone", this.phone_qx);
            localStorage.setItem("is_perfect", res.data.data.is_perfect);
            if (res.data.data.is_perfect == 1) {
              this.$router.push({
                path: "/perfect"
              });
            } else {
              this.$router.push({
                path: "/mine"
              });
            }
          }
        });
    },
    tabLogin() {
      this.loginType = !this.loginType;
    },
    sign() {
      this.$router.push({
        path: "/recruit/sign",
        query: {
          type: this.loginType ? "" : 1
        }
      });
    },
    rePsd() {
      this.$router.push({
        path: "/rePassword",
        query: {
          type: this.loginType ? "" : 1
        }
      });
    },
    wxlogin() {
      this.$toast("正在拉取");
      let redirect_uri = encodeURIComponent(
        "http://www.ilianpei.com/recruit/wxcode"
      );
      // let redirect_uri = encodeURIComponent(
      //   "http://lianpeiwangwap.ip189.lhyw.net/recruit/wxcode"
      // );
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc776bb6f53038a01&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
    }
  }
};
</script>

<style scoped>
.html {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url("../../assets/img/loginbg2.png");
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100%;
  background-position: left bottom;
}
.title::after {
  content: "";
  display: block;
  width: 1.94rem;
  height: 0.1rem;
  border-radius: 0.04rem;
  background: #ff0000;
}
.cover_img img {
  width: 1.69rem;
  height: 1.69rem;
}
.w-90 {
  width: 0.9rem;
}
.icon-weixins {
  margin: 0.46rem 0 1.02rem;
}
.icon-weixin {
  font-size: 0.82rem;
  display: block;
  color: rgba(70, 187, 54, 1);
}
.outlogin {
  margin-top: 0.8rem;
}
.beaf::before,
.beaf::after {
  content: "";
  display: block;
  width: 36%;
  height: 0.01rem;
  background: #eff0f0;
}
.beaf::before {
  margin-right: auto;
  transform: translateY(0.13rem);
}
.beaf::after {
  margin-left: auto;
  transform: translateY(-0.13rem);
}
</style>